<template>
  <div>
    <nav-bar></nav-bar>
    <div class="address" v-if="addressList.length > 0">
      <div class="item" v-for="item in addressList" :key="item.user_id">
        <van-swipe-cell>
          <van-cell :border="false">
            <div class="list">
              <div class="addressList" >
                <div class="right">
                  <p class="name">{{ item.name }}</p>
                  <div class="moren" v-if="item.is_default == 1">默认</div>
                </div>
                <div class="info" @click="chooseAdd(item.id)">
                  <p class="tel">{{ item.mobile }}</p>
                  <p class="add">{{ item.address + item.address_detail }}</p>
                </div>
                <div class="edit" @click="editAddress(item.id)"></div>
              </div>
            </div>
          </van-cell>
          <template #right>
            <van-button
              square
              type="danger"
              text="删除"
              @click="delAddress(item.id)"
            />
          </template>
        </van-swipe-cell>
      </div>
    </div>
    <div class="bottom">
      <div class="newAdd" @click="getNew">+新建地址</div>
    </div>
  </div>
</template>

<script>
import Navbar from "../../../components/Navbar";
import { getListAction } from "@/api/my/address/index.js";
import { deleteAction } from "@/api/my/address/del.js";

export default {
  props: {},
  data() {
    return {
      addressList: [],
    };
  },
  computed: {
    
  },
  created() {
    this.init();
     
   
   
  },
  mounted() {
     
    // console.log(this)
    // this.$router.beforeEach((to, from, next) => { //to:即将前往的页面,from:从哪个页面来,next:下一步操作
    //          if (from.path=='/cart/order') {  
    //               next(this.chooseAdd())
    //          }else {
                 
    //               next({path: 'my/address'})
    //          }
    //     })

  },
  watch: {},
  methods: {
    init() {
      getListAction({
        openId: localStorage.getItem("openId"),
      }).then((res) => {
        console.log(res);
        this.addressList = res.data;
      });
    },
    getNew() {
      this.$router.push("/my/address/change");
    },
    editAddress(id) {
      this.$router.push({ path: "/my/address/change", query: { ids: id } });
    },
    delAddress(id) {
      deleteAction({
        id: id,
      }).then((res) => {
        console.log(res);
        this.init();
      });
    },
    chooseAdd(id) {
       const type =this.$route.query.type
    // console.log(type);
   
    if(type){
      this.$router.push({ path: "/cart/order", query: { ids: id } });
    }else{
      this.$router.push('/my')
    }
    
      
    },
  },
  components: {
    "nav-bar": Navbar,
  },
};
</script>

<style lang="scss" scoped>
.address {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  overflow: auto;
  box-sizing: border-box;
  min-height: 700px;
}
.bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 15px 15px;
  display: flex;
  justify-content: space-between;
  background: #fff;
  .newAdd {
    width: 90%;
    height: 35px;
    line-height: 35px;
    text-align: center;
    border: 1px solid #b4282d;
    color: #b4282d;
    margin: 0 auto;
  }
}
.item {
  padding: 0 10px;
  .list {
    position: relative;
    padding: 15px 0;
    border-bottom: 1px solid #d9d9d9;
    .name {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  .addressList {
    width: 100%;
    position: relative;
    transition: all 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .right {
      width: 50px;
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      align-self: flex-start;
      .moren {
        width: 30px;
        height: 15px;
        border: 1px solid #b4282d;
        text-align: center;
        line-height: 15px;
        color: #b4282d;
        margin: 5px auto 0 auto;
      }
    }
  }
  .info {
    padding: 0 10px;
    flex: 1;
    p {
      text-align: left;
    }
  }
  .info p:nth-child(2) {
    margin-top: 2px;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .edit {
    width: 25px;
    height: 25px;
    margin: 0 10px;
    background: url("http://jinglins.gitee.io/legou/img/edit.d508a455.png")
      no-repeat;
    background-size: 100% 100%;
  }
}
</style>
<style >
.van-swipe-cell__right {
  right: 0;
  /* -webkit-transform: translate3d(100%,0,0); */
  transform: translate3d(103%, 8%, 0);
  height: 100%;
}
</style>
